<template>
    <div>
        <el-page-header @back="goBack" content="新增签约类项目" style="padding: 8px 0 24px 0;">
        </el-page-header>
        <el-row :gutter="15">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="135px">
                <el-col :span="24">
                    <el-form-item label="添加项目信息" prop="followId">
                        <el-select v-model="formData.followId" placeholder="请选择项目类型" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in trailProjectList" :key="dict.id" :label="dict.name"
                                :value="dict.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入单行文本项目名称" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人" prop="proForName">
                        <el-input v-model="formData.proForName" placeholder="请输入负责人" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人联系方式" prop="proForPhone">
                        <el-input v-model="formData.proForPhone" placeholder="请输入负责人联系方式" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目类型" prop="type">
                        <el-select v-model="formData.type" placeholder="请选择项目类型" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.project_type" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目状态" prop="state">
                        <el-select v-model="formData.state" placeholder="请选择项目状态" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.project_state" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目说明" prop="desc">
                        <el-input v-model="formData.desc" type="textarea" placeholder="请输入项目说明" maxlength="500"
                            :disabled="viewType == 'read'" :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="项目规模" prop="scale">
                        <el-input v-model="formData.scale" placeholder="请输入项目规模（万）" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <template slot="append">万</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收付类型" prop="payType">
                        <el-select v-model="formData.payType" placeholder="请选择收付类型" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                            <el-option v-for="dict in dict.type.sign_project_payment" :key="dict.value"
                                :label="dict.label" :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <div v-for="(item, index) in formData.proMoneys" :key="index">
                    <el-col :span="7">
                        <el-form-item label="收款时间" :prop="'proMoneys.' + index + '.payInTime'"
                            :rules="[{ required: true, message: '请选择收款日期', trigger: 'change' }]">
                            <el-date-picker v-model="item.payInTime" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'"
                                :style="{ width: '100%' }" placeholder="请选择收款时间" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="已收金额" :prop="'proMoneys.' + index + '.alreadyInMoney'"
                            :rules="[{ required: true, message: '请输入已收金额', trigger: 'blur' }]">
                            <el-input v-model="item.alreadyInMoney" placeholder="请输入已收金额" clearable
                                :style="{ width: '100%' }" :disabled="viewType == 'read'">
                                <template slot="append">万</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="剩余金额" :prop="'proMoneys.' + index + '.notInMoney'"
                            :rules="[{ required: true, message: '请输入剩余金额', trigger: 'blur' }]">
                            <el-input v-model="item.notInMoney" placeholder="请输入剩余金额" clearable
                                :style="{ width: '100%' }" :disabled="viewType == 'read'">
                                <template slot="append">万</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label-width="20">
                            <el-button size="mini" icon="el-icon-minus" circle @click="removeProMoneys(index)" v-if="index != 0"></el-button>
                            <el-button v-if="index == formData.proMoneys.length - 1" size="mini"
                                icon="el-icon-plus" circle @click="handleProMoneysAdd"></el-button>
                        </el-form-item>
                    </el-col>
                </div>
                <el-col :span="12">
                    <el-form-item label="签约时间" prop="signingTime">
                        <el-date-picker v-model="formData.signingTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'" :style="{ width: '100%' }"
                            placeholder="请选择签约时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="甲方" prop="partyA">
                        <el-input v-model="formData.partyA" placeholder="请输入甲方" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="乙方" prop="partyB">
                        <el-input v-model="formData.partyB" placeholder="请输入乙方" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计划开始时间" prop="planStartTime">
                        <el-date-picker v-model="formData.planStartTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'" :style="{ width: '100%' }"
                            placeholder="请选择计划开始时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计划结束时间" prop="planEndTime">
                        <el-date-picker v-model="formData.planEndTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'" :style="{ width: '100%' }"
                            placeholder="请选择计划结束时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="绑定合同信息" prop="contractId">
                        <el-select v-model="formData.contractId" placeholder="请选择绑定合同信息" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                            <el-option v-for="(item, index) in contractList" :key="index" :label="item.name"
                                :value="item.id" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" maxlength="500"
                            :disabled="viewType == 'read'" :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="附件" prop="annex">
                        <fileUpload @input="getFileList" :value="formData.annex" :disabled="viewType == 'read'" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="info-title"><el-divider>项目里程碑</el-divider></el-col>
                <el-col :span="24">
                    <el-button type="primary" @click="handleAdd"
                        v-if="!progressForm.proSigningMileList.length && viewType != 'read'"
                        style="margin-left: 100px;">新增项目里程碑</el-button>
                </el-col>
            </el-form>
        </el-row>
        <el-row :gutter="15">
            <el-form inline ref="member" :model="progressForm" label-width="130px">
                <div v-for="(item, index) in progressForm.proSigningMileList" :key="index" style="display: flex">
                    <el-form-item label="标题" :prop="'proSigningMileList.' + index + '.title'"
                        :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                        <el-input placeholder="请输入标题" v-model="item.title" :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="完成时间" :prop="'proSigningMileList.' + index + '.FinishTime'"
                        :rules="[{ required: true, message: '请选择完成时间', trigger: 'change' }]">
                        <el-date-picker v-model="item.FinishTime" type="date" :placeholder="`请输入日期`"
                            :disabled="viewType == 'read'" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>
                    <el-form-item label="状态" :prop="'proSigningMileList.' + index + '.isFinish'"
                        :rules="[{ required: true, message: '请选择状态', trigger: 'change' }]">
                        <el-select v-model="item.isFinish" placeholder="请选择收付类型" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.project_progress_state" :key="dict.value"
                                :label="dict.label" :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 12px;">
                        <el-button size="mini" icon="el-icon-minus" circle @click="remove(index)"></el-button>
                        <el-button v-if="index == progressForm.proSigningMileList.length - 1" size="mini"
                            icon="el-icon-plus" circle @click="handleAdd"></el-button>
                    </el-form-item>

                </div>
            </el-form>

        </el-row>
        <div style="text-align: right;margin-top: 10px;">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="resetForm">返回</el-button>
        </div>
    </div>
</template>
<script>
import { addSignProject, updateSignProject, getContractList, getDeclareProjectList } from "@/api/project/index";
export default {
    dicts: ['project_state', 'sign_project_payment', 'project_type', 'project_progress_state'],
    props: {
        viewType: {
            type: String,
            default: ''
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            trailProjectList: [],
            contractList: [],
            progressForm: {
                proSigningMileList: [],
            },

            proSigningMile: {

            },
            formData: {
                proMoneys: [
                    {
                        payInTime: null,
                        alreadyInMoney: undefined,
                        notInMoney: undefined
                    }
                ],
                followId: undefined,
                name: undefined,
                proForName: undefined,
                proForPhone: undefined,
                type: undefined,
                state: undefined,
                desc: undefined,
                scale: undefined,
                payType: undefined,
                signingTime: null,
                partyA: undefined,
                partyB: undefined,
                planStartTime: null,
                planEndTime: null,
                contractId: undefined,
                field115: undefined,
                field117: undefined,
                remark: undefined,
                annex: undefined,
            },
            rules: {
                name: [{
                    required: true,
                    message: '请输入单行文本项目名称',
                    trigger: 'blur'
                }],
                proForName: [{
                    required: true,
                    message: '请输入负责人',
                    trigger: 'blur'
                }],
                proForPhone: [{
                    required: true,
                    message: '请输入负责人联系方式',
                    trigger: 'blur'
                },
                {
                    pattern: /^1[3456789]\d{9}$/,
                    message: "请输入正确的手机号",
                    trigger: "blur",
                }],
                type: [{
                    required: true,
                    message: '请选择项目类型',
                    trigger: 'change'
                }],
                state: [{
                    required: true,
                    message: '请选择项目状态',
                    trigger: 'change'
                }],
                desc: [{
                    required: true,
                    message: '请输入项目说明',
                    trigger: 'blur'
                }],
                scale: [{
                    required: true,
                    message: '请输入项目规模',
                    trigger: 'blur'
                }],
                payType: [{
                    required: true,
                    message: '请选择收付类型',
                    trigger: 'change'
                }],
                signingTime: [{
                    required: true,
                    message: '请选择签约时间',
                    trigger: 'change'
                }],
                partyA: [{
                    required: true,
                    message: '请输入甲方',
                    trigger: 'blur'
                }],
                partyB: [{
                    required: true,
                    message: '请输入乙方',
                    trigger: 'blur'
                }],
                planStartTime: [{
                    required: true,
                    message: '请选择计划开始时间',
                    trigger: 'change'
                }],
                planEndTime: [{
                    required: true,
                    message: '请选择计划结束时间',
                    trigger: 'change'
                }],
                contractId: [],
                field115: [{
                    required: true,
                    message: '请输入标题',
                    trigger: 'blur'
                }],
                field117: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'change'
                }],
                remark: [],
            },
            annexAction: '/dev-api/system/oss/upload',
            annexfileList: []
        }
    },
    computed: {},
    watch: {
        form: {
            handler(val) {
                this.formData = JSON.parse(JSON.stringify(val));
                this.progressForm.proSigningMileList = this.formData.proSigningMileList;
            },
            deep: true
        }
    },
    created() { },
    mounted() {
        this.getContractList();
        this.declareProjectList();
    },
    methods: {
        handleProMoneysAdd() {
            this.formData.proMoneys.push({ payInTime: "", alreadyInMoney: "", notInMoney: "" });
        },
        removeProMoneys(index) {
            if (this.formData.proMoneys.length >= 1) {
                this.formData.proMoneys.splice(index, 1);
            } else {
                this.formData.proMoneys[0] = { payInTime: "", alreadyInMoney: "", notInMoney: "" };
            }
        },
        // 获取申报项目列表
        declareProjectList() {
            getDeclareProjectList({}).then(response => {
                this.trailProjectList = response.data;
            });
        },
        // 获取合同列表
        getContractList() {
            getContractList({}).then(res => {
                if (res.code === 200) {
                    this.contractList = res.data;
                }
            })
        },
        handleAdd() {
            this.progressForm.proSigningMileList.push({ title: "", isFinish: "", FinishTime: "" });
        },
        remove(index) {
            if (this.progressForm.proSigningMileList.length >= 1) {
                this.progressForm.proSigningMileList.splice(index, 1);
            } else {
                this.progressForm.proSigningMileList[0] = {
                    title: "", isFinish: "", FinishTime: ""
                };
            }
        },
        //封装验证函数
        submitForm(form) {
            return new Promise((resolve, reject) => {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        resolve()
                    } else {
                        reject(new Error('错误'))
                    }
                })
            })
        },
        //确定按钮
        onSubmit() {
            Promise.all([this.submitForm('elForm'), this.submitForm('member')])
                .then(() => {
                    //验证成功后在此处发请求
                    if (this.formData.id != undefined) {
                        updateSignProject({ ...this.formData, proSigningMileList: this.progressForm.proSigningMileList }).then(response => {
                            if(response.code == 200) {
                                this.$modal.msgSuccess("修改成功");
                                this.$router.push({
                                    path: '/project/projectList'
                                });
                            }
                        });
                    } else {
                        addSignProject({ ...this.formData, proSigningMileList: this.progressForm.proSigningMileList }).then(response => {
                            if(response.code == 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.$router.push({
                                    path: '/project/projectList'
                                });
                            }
                        });
                    }
                })
                .catch(() => {
                    this.$message.error('验证失败')
                })
        },
        handleDelete(index) {
            this.contractPayPlanList.splice(index, 1);
            this.contractPayPlanRules.splice(index, 1);
        },
        addProjectProgress() { },
        getFileList(file) {
            this.formData.annex = file;
        },
        goBack() {
            this.$router.go(-1);
        },
        resetForm() {
            this.$router.push({
                path: '/project/projectList'
            })
        },
        annexBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },
    }
}

</script>
<style>
.el-upload__tip {
    line-height: 1.2;
}
</style>